import React, { Component } from 'react'
import './index.scss';
import axios from 'axios';
import { SideBar } from 'antd-mobile'
import abc from '../../img/gift.png'
import abc1 from '../../img/two-member.png'
import abc2 from '../../img/new_shopCart1.png'
export default class Category extends Component {
    constructor() {
        super();
        this.state = {
            tabsList: [],//左侧菜单列表数据
            cateList: [],//右侧数据
            activeKey: "312",
        }
    }

    componentDidMount() {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/categoryList', { "isWholeSale": 0, "channelId": null }
        ).then(res => {
            console.log(res);
            this.setState({ tabsList: res.data.data.categoryInfo })
        })

        //获取右侧数据
        this.getCateData();


    }

    getCateData = () => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory', { "ceoStatus": 0, "catKey": this.state.activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" }
        ).then(res => {
            console.log(res);
            this.setState({ cateList: res.data.data.commodityInfo })
            console.log(this.state.cateList);
        })
    }

    setActiveKey = (value) => {
        console.log("左侧菜单点击了", value);
        //将 value的值赋值给 state
        this.setState({
            activeKey: value
        }, () => {
            this.getCateData();
        })

    }

    render() {
        //
        let { tabsList, activeKey, cateList } = this.state;
        return (
            <div className="cate_con">
                <div className='cate_left'>
                    <SideBar activeKey={activeKey} onChange={this.setActiveKey}>
                        {tabsList.map(item => (
                            <SideBar.Item key={item.code} title={item.displayName} />
                        ))}
                    </SideBar>
                </div>
                <div className='cate_right'>
                    <ul>
                        {
                            cateList.map(item => <li key={item.key}>
                                <div className='right_img'>
                                    <img src={item.template.listImages} alt={item.template.listImages} />
                                </div>
                                <div className='right_text'>
                                    <span>{item.name}</span>
                                    <span className='span1'>{item.template.displayName}</span>
                                    <span><img src={abc} alt={1} /></span>
                                    <span className='price'>
                                        <span>￥{item.template.retailPrice} </span>
                                        <span>￥{item.template.supplyPrice}</span>
                                        <img src={abc1} alt={2} />
                                    </span>
                                    <img src={abc2} alt={2} className='shop' />
                                </div>
                            </li>)
                        }
                    </ul>
                </div>
            </div>
        )
    }
}
